import { _decorator, Component, Node, Label, ProgressBar, Button } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { i18n } from '../../../../scripts/i18n';
import { taskm } from '../../../../scripts/managers/TaskManager';
import { DevConfig } from '../../../../scripts/managers/DevConfig';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { EventTarget } from 'cc';
import { udm } from '../../../../scripts/managers/UserDataManager';
import { MergeASAP } from '../../../../scripts/libs/rxjs/cc3/Merge';
import { gm } from '../../../../scripts/managers/GameManager';
import { SpriteFrame } from 'cc';
import { Sprite } from 'cc';
import { UIOpacity } from 'cc';
import { color } from 'cc';
const { ccclass, property } = _decorator;

const _color_orange_outline = color().fromHEX('#D46115');
const _color_blue_outline = color().fromHEX('#16599D');

@ccclass('TaskItem')
export class TaskItem extends BaseView {

    eventTarget: EventTarget = null;

    taskId = ReactiveProperty.Create<number>(null);

    @property
    noButton = false;

    @property(Label)
    taskIdLabel: Label = null;

    @property(Label)
    contentLabel: Label = null;

    @property(ProgressBar)
    progressBar: ProgressBar = null;

    @property(Label)
    progressLabel: Label = null;

    @property(Button)
    goButton: Button = null;

    @property(Button)
    claimButton: Button = null;

    @property(Node)
    gotNode: Node = null;

    @property(SpriteFrame)
    iconSpriteFrame: SpriteFrame[] = []

    @property(Sprite)
    iconSprite: Sprite = null;

    @property(SpriteFrame)
    bgSpriteFrame: SpriteFrame[] = []

    @property(Sprite)
    bgSprite: Sprite = null;

    @property(SpriteFrame)
    bgBarSpriteFrame: SpriteFrame[] = []

    @property(Sprite)
    bgBarSprite: Sprite = null;

    @property(Node)
    itemBg: Node = null;

    @property(Sprite)
    progressIcon: Sprite = null;

    @property(SpriteFrame)
    progressIconList: SpriteFrame[] = [];

    private iconType = {
        'coin': 0,
        'swapper': 1,
        'magnet': 2,
        'balloon': 3
    }

    useObserves() {
        return [
            MergeASAP(udm.task, this.taskId).subscribe(this.refresh.bind(this)),
            BindButton(this.goButton).subscribe(this.goButtonClicked.bind(this)),
            BindButton(this.claimButton).subscribe(this.claimButtonClicked.bind(this)),
        ];
    }

    refresh() {
        if (this.taskId.value == null) return;
        this.contentLabel.string = i18n.t(`task.taskId.${this.taskId.value}`);
        let currentTimes = taskm.getTaskCurrentTimes(this.taskId.value);
        let taskInfo = taskm.taskMap.get(this.taskId.value);
        let totalTimes = taskInfo.times;
        let progress = currentTimes / totalTimes;
        this.progressLabel.string = `${currentTimes} / ${totalTimes}`;
        this.progressBar.progress = progress;
        // this.taskIdLabel.string = `#${this.taskId.value}\n${JSON.stringify(taskInfo.provide)}`;
        let keys = Object.keys(taskInfo.provide)
        this.taskIdLabel.string = `x${taskInfo.provide[keys[0]]}`;
        this.iconSprite.spriteFrame = this.iconSpriteFrame[this.iconType[keys[0]]]//切换不同的图片

        if (taskInfo.taskType == 'daily_task' && currentTimes >= totalTimes) {
            this.progressIcon.spriteFrame = this.progressIconList[1]
        }


        if (currentTimes == -1) { // 已经领取
            this.gotNode.active = true;
            this.goButton.node.active = false;
            this.claimButton.node.active = false;
            // this.progressLabel.string = 'Claimed';
            this.progressLabel.string = '';
            this.progressBar.progress = 1;
            this.node.getComponent(UIOpacity).opacity = 150;
            this.bgSprite.spriteFrame = this.bgSpriteFrame[0];
            this.bgBarSprite.spriteFrame = this.bgBarSpriteFrame[0];
            this.contentLabel.outlineColor = _color_blue_outline;
        } else if (currentTimes >= totalTimes) { // 完成，可以领取
            this.gotNode.active = false;
            this.goButton.node.active = false;
            this.claimButton.node.active = true;
            this.bgSprite.spriteFrame = this.bgSpriteFrame[1]
            this.bgBarSprite.spriteFrame = this.bgBarSpriteFrame[1];
            this.contentLabel.outlineColor = _color_orange_outline;
        } else { // 未完成，进行中
            this.gotNode.active = false;
            this.goButton.node.active = true;
            this.claimButton.node.active = false;
            this.bgSprite.spriteFrame = this.bgSpriteFrame[0]
            this.bgBarSprite.spriteFrame = this.bgBarSpriteFrame[0];
            this.contentLabel.outlineColor = _color_blue_outline;
        }

        if (this.noButton) {
            // this.gotNode.active = false;
            this.goButton.node.active = false;
            this.claimButton.node.active = false;
        }

    }

    goButtonClicked() {
        this.eventTarget.emit('go', this);
        if (gm.editAltPressed.value) {
            let taskInfo = taskm.taskMap.get(this.taskId.value);
            taskm.checkInc(taskInfo.taskType);
        }
    }

    claimButtonClicked() {
        taskm.claim(this.taskId.value);
        this.eventTarget.emit('claim', this);
    }

}